<script setup>
import { usePersonStore } from '@/stores';
import { Plus } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
const personStore = usePersonStore()
const { userInfo, changeFlag, changeMsg, imgIsShow } = storeToRefs(personStore)
const { handleAvatarSuccess} = personStore

</script>
<template>
    <div style="margin-left: 20px;">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span><strong>我的信息</strong></span>
                    <el-button class="button" type="success">{{ userInfo.nickname }}</el-button>
                </div>
            </template>


            <!-- userInfo -->
            <el-form label-width="80px" v-model="userInfo">
                <!-- avatar -->
                <el-upload class="avatar-uploader" action="/api/file/upload" :disabled="!changeFlag" :show-file-list="false" :on-success="handleAvatarSuccess"
                    style="text-align: center;margin-bottom: 5px;">
                    <img v-if="userInfo.avatarUrl && imgIsShow" :src="userInfo.avatarUrl" class="avatar" />
                   
                    <el-icon v-else class="avatar-uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-form-item label="用户名">
                    <div style="margin: 1px 0 1px 7px;">{{ userInfo.username }}</div>
                </el-form-item>
                <el-form-item label="昵称">
                    <div v-if="changeFlag"><el-input v-model="userInfo.nickname" autocomplete="off"></el-input></div>
                    <div v-else style="margin: 1px 0 1px 7px;">{{ userInfo.nickname }}</div>
                </el-form-item>
                <el-form-item label="邮箱">
                    <div v-if="changeFlag"><el-input v-model="userInfo.email" autocomplete="off"></el-input></div>
                    <div v-else style="margin: 1px 0 1px 7px;">{{ userInfo.email }}</div>
                </el-form-item>
                <el-form-item label="电话">
                    <div v-if="changeFlag"><el-input v-model="userInfo.phone" autocomplete="off"></el-input></div>
                    <div v-else style="margin: 1px 0 1px 7px;">{{ userInfo.phone }}</div>
                </el-form-item>
                <el-form-item label="地址">
                    <div v-if="changeFlag"><el-input v-model="userInfo.address" autocomplete="off"></el-input></div>
                    <div v-else style="margin: 1px 0 1px 7px;">{{ userInfo.address }}</div>
                </el-form-item>
                <el-form-item style="margin-left: 50px;">
                    <el-button type="warning" @click="personStore.changeUserInfo()">{{ changeMsg }}</el-button>
                    <el-button type="primary" @click="ElMessage.info('没有那么多看的😒')">展示更多</el-button>
                </el-form-item>

            </el-form>

        </el-card>
    </div>
</template>
  
<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 480px;
}
</style>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>